1
00:00:05,190 --> 00:00:03,110
this is going to tell you how to make a

2
00:00:07,269 --> 00:00:05,200
cinemagraph which is a looping animated

3
00:00:09,509 --> 00:00:07,279
gif using a very short segment of film

4
00:00:11,270 --> 00:00:09,519
here's my original film segment

5
00:00:13,430 --> 00:00:11,280
i'm going to take this segment of film

6
00:00:16,070 --> 00:00:13,440
and i'm going to open it in final cut

7
00:00:18,470 --> 00:00:16,080
pro lots of film editing software will

8
00:00:20,550 --> 00:00:18,480
allow you to do this this first step

9
00:00:22,310 --> 00:00:20,560
uh we take the large film segment and

10
00:00:24,070 --> 00:00:22,320
we're gonna crop out a very small part

11
00:00:25,029 --> 00:00:24,080
of it so i'm gonna find the bit that i

12
00:00:26,710 --> 00:00:25,039
need

13
00:00:28,630 --> 00:00:26,720
uh it's gonna be something where most of

14
00:00:30,550 --> 00:00:28,640
the image is static and we're just gonna

15
00:00:32,549 --> 00:00:30,560
take the bit that animates which is

16
00:00:35,110 --> 00:00:32,559
going to be the water coming out of the

17
00:00:36,630 --> 00:00:35,120
can so i've narrowed down that one bit

18
00:00:38,470 --> 00:00:36,640
in the middle another thing you can do

19
00:00:40,229 --> 00:00:38,480
here instead of finding a bit to loop is

20
00:00:41,750 --> 00:00:40,239
actually take a short segment and then

21
00:00:45,510 --> 00:00:41,760
play it forwards and backwards so it

22
00:00:48,310 --> 00:00:45,520
ping pongs then it will naturally loop

23
00:00:50,869 --> 00:00:48,320
all right so here i've

24
00:00:52,790 --> 00:00:50,879
got the small segment that i need i'm

25
00:00:54,310 --> 00:00:52,800
going to zoom in on that segment and i'm

26
00:00:56,389 --> 00:00:54,320
going to

27
00:00:59,029 --> 00:00:56,399
cut it in half

28
00:01:01,670 --> 00:00:59,039
i'm going to slice it down the middle

29
00:01:03,590 --> 00:01:01,680
and what we want to do is to make make

30
00:01:05,189 --> 00:01:03,600
it loop and because it doesn't loop

31
00:01:07,510 --> 00:01:05,199
perfectly as is

32
00:01:08,710 --> 00:01:07,520
we move the position where the loop

33
00:01:10,390 --> 00:01:08,720
happens

34
00:01:11,670 --> 00:01:10,400
so it's in the middle of the clip by

35
00:01:13,510 --> 00:01:11,680
taking the second half putting it in the

36
00:01:15,750 --> 00:01:13,520
front then we take a cross dissolve

37
00:01:18,149 --> 00:01:15,760
transition and we stick it over

38
00:01:20,149 --> 00:01:18,159
uh over that transition

39
00:01:22,070 --> 00:01:20,159
uh which should make it loop fairly

40
00:01:24,149 --> 00:01:22,080
seamlessly i'm gonna shrink that

41
00:01:27,510 --> 00:01:24,159
slightly

42
00:01:28,789 --> 00:01:27,520
let's see how that looks

43
00:01:31,030 --> 00:01:28,799
all right it doesn't preview very well

44
00:01:32,710 --> 00:01:31,040
in here but we'll export it

45
00:01:34,469 --> 00:01:32,720
and uh

46
00:01:40,230 --> 00:01:34,479
i'll be able to preview that in the

47
00:01:44,950 --> 00:01:42,469
i'm just going to save it to the desktop

48
00:01:47,109 --> 00:01:44,960
and here it is uh when you look at it in

49
00:01:49,749 --> 00:01:47,119
the quicktime viewer you can have to

50
00:01:54,230 --> 00:01:49,759
turn on the looping to see it working

51
00:01:57,429 --> 00:01:55,749
there you go

52
00:02:00,789 --> 00:01:57,439
all right so now we need to take that

53
00:02:02,230 --> 00:02:00,799
and isolate the uh segment of the image

54
00:02:03,749 --> 00:02:02,240
that we want to animate we don't want to

55
00:02:06,230 --> 00:02:03,759
animate the entire image because that

56
00:02:07,830 --> 00:02:06,240
would be uh it doesn't doesn't give you

57
00:02:09,589 --> 00:02:07,840
the visual effect it also takes up quite

58
00:02:10,550 --> 00:02:09,599
too much space when you save it out as a

59
00:02:12,710 --> 00:02:10,560
gif

60
00:02:14,309 --> 00:02:12,720
so take the uh

61
00:02:16,229 --> 00:02:14,319
the whole movie which is exported and

62
00:02:18,309 --> 00:02:16,239
loaded into photoshop which loads it as

63
00:02:19,910 --> 00:02:18,319
a layer in photoshop

64
00:02:23,750 --> 00:02:19,920
we cut that down to whatever size we

65
00:02:24,790 --> 00:02:23,760
like now i'm going to select the image

66
00:02:26,470 --> 00:02:24,800
i'm going to

67
00:02:28,309 --> 00:02:26,480
make a copy of it which just copies the

68
00:02:29,830 --> 00:02:28,319
first frame and then i'm going to paste

69
00:02:32,070 --> 00:02:29,840
that which will create a new layer that

70
00:02:34,070 --> 00:02:32,080
just has a single static frame which is

71
00:02:37,509 --> 00:02:34,080
the first frame of the movie

72
00:02:38,630 --> 00:02:37,519
uh select that layer and i add a layer

73
00:02:43,030 --> 00:02:38,640
mask

74
00:02:44,710 --> 00:02:43,040
to reveal the bits of the movie beneath

75
00:02:47,110 --> 00:02:44,720
so the only bits of the image that will

76
00:02:49,030 --> 00:02:47,120
animate are the bits that we can see

77
00:02:50,790 --> 00:02:49,040
through this layer mask so i take a

78
00:02:52,949 --> 00:02:50,800
brush a diffuse

79
00:02:55,990 --> 00:02:52,959
soft black brush

80
00:02:57,670 --> 00:02:56,000
and i paint over the layer mask

81
00:03:00,470 --> 00:02:57,680
just paint over the area that you want

82
00:03:03,509 --> 00:03:02,070
it's good to have a soft edged brush

83
00:03:06,309 --> 00:03:03,519
here so it

84
00:03:08,149 --> 00:03:06,319
it smoothly uh fits in with the rest all

85
00:03:09,509 --> 00:03:08,159
right so now when i play that

86
00:03:11,750 --> 00:03:09,519
you can see it's just animating in that

87
00:03:14,470 --> 00:03:11,760
one area and i can just take this image

88
00:03:17,030 --> 00:03:14,480
now and i can export it with the safe

89
00:03:19,110 --> 00:03:17,040
web and devices

90
00:03:21,030 --> 00:03:19,120
because it's only animating that wire it

91
00:03:22,070 --> 00:03:21,040
will automatically optimize the whole

92
00:03:23,589 --> 00:03:22,080
image

93
00:03:26,630 --> 00:03:23,599
and take a very little memory as you can

94
00:03:30,550 --> 00:03:26,640
see it takes about half a megabyte

95
00:03:32,149 --> 00:03:30,560
set the animating to forever and save

96
00:03:34,789 --> 00:03:32,159
that's pretty much it you can now

97
00:03:37,430 --> 00:03:34,799
preview it in a web browser

98
00:03:40,470 --> 00:03:37,440
uh to host this on the web you can have

99
00:03:41,830 --> 00:03:40,480
to upload it somewhere i use an ftp site

100
00:03:43,110 --> 00:03:41,840
uh but you might be able to find

101
00:03:45,430 --> 00:03:43,120
somewhere else that can host gif

102
00:03:47,910 --> 00:03:45,440
animated gifs

103
00:03:49,589 --> 00:03:47,920
here it is in safari and you can see it